<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>标签栏切换</title>

    <style>
      #tabs {
        width: 500px;
        user-select: none;
      }
      #tabs > div:first-child {
        background-color: #eee;
        color: #555;
        /* 晚上回顾下 弹性盒子:  很有用 */
        display: flex;
      }
      #tabs > div:first-child > span {
        line-height: 40px;
        flex: 1;
        text-align: center;
        border: 1px solid gray;
      }

      #tabs > div:last-child > div {
        height: 200px;
        border: 2px solid green;
        display: none;
      }

      #tabs > div:first-child > .cur {
        background-color: aqua;
      }
      #tabs > div:last-child > .cur {
        display: block;
      }
    </style>
  </head>
  <body>
    <div id="tabs">
      <div>
        <!-- 自定义属性: index 代表对应的详情元素的序号 -->
        <span data-index="0" class="cur">今日点数</span>
        <span data-index="1">本周点数</span>
        <span data-index="2">贵宾(1.4万)</span>
        <span data-index="3">钻粉(273)</span>
      </div>
      <div>
        <div class="cur">今日点数...</div>
        <div>本周点数...</div>
        <div>贵宾(1.4万)...</div>
        <div>钻粉(273)...</div>
      </div>
    </div>

    <script>
      const titles = document.querySelectorAll('#tabs>div:first-child>span')

      titles.forEach(value => {
        value.onclick = function () {
          const cur = document.querySelector('#tabs>div:first-child>.cur')
          cur.classList.remove('cur')
          this.classList.add('cur')

          const index = this.dataset.index //自定义属性: 序号

          // 移除内容的当前项样式
          const cur1 = document.querySelector('#tabs>div:last-child>.cur')
          cur1.classList.remove('cur')

          const content = document.querySelector('#tabs>div:last-child')
          // 通过序号找到对应的子元素
          content.children[index].classList.add('cur')
        }
      })
    </script>
  </body>
</html>
